{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Collections" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Collections by agent" %}</h1>
    <p>{% if period == "week" %}{% blocktranslate trimmed with start=start|date:"D j M" end=last_day|date:"D j M Y" %}Week of {{ start }} to {{ end }}{% endblocktranslate %}{% else %}{{ start|date:"F Y" }}{% endif %}. {% translate "Only supervisors and administrators can see this page." %}</p>
  </div>
  <div class="actions">
    <div class="seg" aria-label="{% translate 'Period' %}">
      <a href="?period=week"{% if period == "week" %} aria-current="true"{% endif %}>{% translate "Week" %}</a>
      <a href="?period=month"{% if period == "month" %} aria-current="true"{% endif %}>{% translate "Month" %}</a>
    </div>
    <a class="btn" href="{{ prev_link }}">{% translate "Previous" %}</a>
    {% if next_link %}<a class="btn" href="{{ next_link }}">{% translate "Next" %}</a>{% endif %}
    <a class="btn" href="{% url_with export='csv' %}">{% translate "Download (CSV)" %}</a>
  </div>
</div>

<div class="figures">
  <div><span class="n money" style="font-size:1.3rem">{{ overall.total|tzs }}</span><span class="l">{% translate "Total collected" %}</span></div>
  <div><span class="n money" style="font-size:1.3rem">{{ overall.gifts|tzs }}</span><span class="l">{% blocktranslate trimmed count n=overall.gifts_n %}Giving, {{ n }} transaction{% plural %}Giving, {{ n }} transactions{% endblocktranslate %}</span></div>
  <div><span class="n money" style="font-size:1.3rem">{{ overall.orders|tzs }}</span><span class="l">{% blocktranslate trimmed count n=overall.orders_n %}Order payments, {{ n }} order{% plural %}Order payments, {{ n }} orders{% endblocktranslate %}</span></div>
  <div><span class="n">{{ rows|length }}</span><span class="l">{% translate "Agents" %}</span></div>
</div>

<div class="table-wrap">
  <table>
    <thead><tr><th>{% translate "Agent" %}</th><th class="right">{% translate "Gifts" %}</th><th class="right">{% translate "Giving" %}</th><th class="right hide-sm">{% translate "Orders" %}</th><th class="right hide-sm">{% translate "Order payments" %}</th><th class="right">{% translate "Total" %}</th></tr></thead>
    <tbody>
    {% for r in rows %}
      <tr{% if not r.total %} class="absent"{% endif %}>
        <td class="title">{% if r.person %}{{ r.person.display_name }}{% else %}{% translate "Former agent" %}{% endif %}</td>
        <td class="right num">{{ r.gifts_n }}</td>
        <td class="right money">{{ r.gifts|tzs }}</td>
        <td class="right num hide-sm">{{ r.orders_n }}</td>
        <td class="right money hide-sm">{{ r.orders|tzs }}</td>
        <td class="right money"><strong>{{ r.total|tzs }}</strong></td>
      </tr>
    {% endfor %}
      <tr>
        <td class="title">{% translate "All agents" %}</td>
        <td class="right num"><strong>{{ overall.gifts_n }}</strong></td>
        <td class="right money"><strong>{{ overall.gifts|tzs }}</strong></td>
        <td class="right num hide-sm"><strong>{{ overall.orders_n }}</strong></td>
        <td class="right money hide-sm"><strong>{{ overall.orders|tzs }}</strong></td>
        <td class="right money"><strong>{{ overall.total|tzs }}</strong></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="split-even" style="margin-top:20px">
  <section class="panel">
    <div class="panel-head"><h2>{% translate "Giving by transaction type" %}</h2></div>
    {% if by_type %}<ul class="meter">{% for r in by_type %}<li><span>{{ r.label }}</span><span class="track"><span class="fill sun" style="width:{{ r.share }}%"></span></span><span class="v money small">{{ r.total|tzs }}</span></li>{% endfor %}</ul>
    {% else %}<p class="muted small">{% translate "Nothing recorded in this period." %}</p>{% endif %}
  </section>
  <section class="panel">
    <div class="panel-head"><h2>{% translate "By medium" %}</h2></div>
    {% if by_medium %}<ul class="meter">{% for r in by_medium %}<li><span>{{ r.label }}</span><span class="track"><span class="fill" style="width:{{ r.share }}%"></span></span><span class="v money small">{{ r.total|tzs }}</span></li>{% endfor %}</ul>
    {% else %}<p class="muted small">{% translate "Nothing recorded in this period." %}</p>{% endif %}
  </section>
</div>
{% endblock %}